<template>
  <view
    class="app-header"
    :style="computedStyle"
  >
    <view class="app-header-status-bar" :style="statusBarStyle"></view>
    <view class="app-header-content" :style="contentStyle">
      <view v-if="showBack" class="app-header-back" @click="onBack">
        <image :src="backImage" class="app-header-back-img" mode="aspectFit" />
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  background: {
    type: String,
    default: '#ffffff'
  },
  customStyle: {
    type: String,
    default: ''
  },
  contentStyle: {
    type: String,
    default: ''
  },
  showBack: {
    type: Boolean,
    default: false
  },
  backImage: {
    type: String,
    default: '/static/back.png'
  }
})

const emit = defineEmits(['back'])

const statusBarHeight = ref(0)
const navBarHeight = ref(44)

const computedStyle = computed(() => `background:${props.background};${props.customStyle}`)
const statusBarStyle = computed(() => `height:${statusBarHeight.value}px;`)

function onBack() {
  emit('back')
  if (getCurrentPages().length > 1) {
    uni.navigateBack()
  }
}

onMounted(() => {
  // 适配不同机型的状态栏高度
  // #ifdef APP-PLUS
  statusBarHeight.value = plus.navigator.getStatusbarHeight()
  // #endif
  // #ifndef APP-PLUS
  statusBarHeight.value = 20
  // #endif
})
</script>

<style scoped>
.app-header {
  width: 100%;
  box-sizing: border-box;
}
.app-header-status-bar {
  width: 100%;
  background: transparent;
}
.app-header-content {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}
.app-header-back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-header-back-img {
  width: 22px;
  height: 22px;
}
</style> 